<script setup lang="ts">
import * as echarts from 'echarts';
// import chinaJson from "@/assets/json/yantaimap.json"
import chinaJson from "/@/assets/json/china.json"
import {onMounted} from "vue";
import {inc} from "nprogress";
onMounted(() => {
  var myChart = echarts.init(document.getElementById('myChart'))
  window.onresize = function(){
    // 图形随窗口变化而变化
    myChart.resize();
  }
  console.log("========mounted")
  initMyChartt(myChart)
})

const initMyChartt = (mychart) => {
  let dataList = [
    {name: '湖北省', value: 732},
    {name: '贵州省', value: 666},
    {name: '广东省', value: 333},
    {name: '广西壮族自治区', value: 123},
    {name: '湖南省', value: 50},
    {name: '四川省', value: 0}
  ]
  let option = {
    tooltip: {
      trigger: 'item',
      formatter: function (params) {
        return params.name+':'+params.value;//自行定义formatter格式
      }
    },
    visualMap: {
      show: false,
      min: 0,
      max: 1000,
      left: 'left',
      top: 'bottom',
      text: ['高', '低'],//取值范围的文字
      inRange: {
        color: ['#79bbff', '#c45656', '#FD665F']
      },
    },
    geo: {
      map: 'china',

      aspectScale: 0.85,
      zoom: 1.2,
      top: '10%',//***********重点**********距离顶部的位置，每层向下一个百分比
      left: '11%',
      roam: true,
      z: 3,//*********重点*********可以看成是css的z-index，数字越大图层越高，我这里设置了5个，然后页面有点卡，根据实际需要来添加，3个其实就能      scaleLimit:{min:1,max:3}, // 缩放级别
      regions: [
        {
          name: "南海诸岛",
          value: 0,
          itemStyle: {
            opacity: 1, // 不绘制
          },
          label: {
            show: false // 不显示文字
          }
        }
      ],
      label: {
        show: true,
        fontSize: '10',
        color: 'rgba(0,0,0,0.7)', // 大区文本颜色

      },
      itemStyle: {
        areaColor: '#004b75',//****重点****每个图层的背景色，根据需要来调，由亮变暗，下面的几个颜色也一样
        borderColor: '#195175',
        borderWidth: 2,
        shadowColor: '#0f4c74',
        shadowOffsetX: 0,
        shadowOffsetY: 4,
        shadowBlur: 10,
        // borderWidth: 0,
        // borderColor: 'rgba(0, 0, 0, 0.2)', // 边界框线颜色

      },
      emphasis: {
        label: {
          color: '#fff'
        },
        itemStyle: {
          areaColor: '#337ecc',//鼠标选择区域颜色
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowBlur: 20,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        }
      }
    },
    series: [
      {
        name: '中国地图',
        type: 'map3D',
        geoIndex: 0,
        data: dataList
      }
    ]
  }
  echarts.registerMap('china', { geoJSON: chinaJson });
  mychart.setOption(option, true);
}
</script>

<template>
  <div id="myChart" style="width:100vw;height:calc(100vh - 30px); background: radial-gradient(circle, #ff9a9e, #fad0c4);"></div>
</template>

<style scoped lang="scss">

</style>